<template>
    <div>
        <el-table  height="560" :data="listData.list" stripe style="width:100%;overflow-y: auto">
            <el-table-column prop="name" label="姓名" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
            <el-table-column prop="role" label="角色" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="showDetail(scope.row)">查看</el-button>
                    <el-button type="text" @click="deleteItem(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="list-paginate">
            <el-pagination
 n                  background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="params.currPage"
                :page-size="params.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :total="listData.totalCount"
                @current-change="changePage"
                @size-change="handleSizeChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            params:{
                currPage:1,
                pageSize:15,
            },
            listData:{
                currPage: 0,
                list: [],
                pageSize: 0,
                totalCount: 0,
                totalPage: 0,
            }
        }
    },
    mounted() {
        this.initData();
    },
    methods:{
        // 初始化数据
        initData(){
            this.$http.get("/api/list", {params:this.params}).then(result => {
                if(result.code == 200){
                    this.listData = result.data;
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 分页点击
        changePage(e){
            this.params.currPage = e;
            this.initData();
        },
        // 每页条数改变
        handleSizeChange(val) {
            this.params.pageSize = val;
            this.params.currPage = 1;
            this.initData();
        },
    }
}
</script>

<style lang="less" scoped>
.list-paginate{
    margin-top: 20px;
    text-align: right;
}
</style>
